<template xmlns="">
	<a-row class="login">
		<a-col :offset="8" :span="8" class="login-main">
			<h1 style="text-align: center">
				<rocket-two-tone/>&nbsp;WWC仿12306售票系统
			</h1>
			<a-form
				:model="loginForm"
				autocomplete="off"
				name="basic"
			>
				<a-form-item
					:rules="[{ required: true, message: '请输入手机号!' }]"
					label=""
					name="mobile"
				>
					<a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
				</a-form-item>

				<a-form-item
					:rules="[{ required: true, message: '请输入验证码!' }]"
					label=""
					name="code"
				>
					<a-input v-model:value="loginForm.code">
						<template #addonAfter>
							<a @click="sendCode">获取验证码</a>
						</template>
					</a-input>
					<!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
				</a-form-item>

				<a-form-item>
					<a-button block type="primary" @click="login">登录</a-button>
				</a-form-item>
			</a-form>
		</a-col>
	</a-row>
</template>

<script>
import {defineComponent, reactive} from 'vue';
import axios from 'axios';
import {notification} from 'ant-design-vue';
import {useRouter} from 'vue-router';
import store from '@/store';

export default defineComponent({
	name: 'login-view',
	setup(){
		const router = useRouter();

		/**
		 * 绑定表单数据
		 */
		const loginForm = reactive({
			mobile: '18738872688',
			code: '',
		});

		/**
		 * 发送验证码
		 */
		const sendCode = () => {
			// 调用发送验证码接口
			axios.post('/member/member/send-code', {
				mobile: loginForm.mobile
			}).then((r) => {
				const {success, message} = r.data;
				// 判断请求是否成功
				if(success){
					notification.success({message: '发送验证码成功！'});
					// 请求成功默认赋值验证码
					loginForm.code = '888888';
				}else{
					notification.error({message: message});
				}
			});
		};

		/**
		 * 登录
		 */
		const login = () => {
			// 调用登录接口
			axios.post('/member/member/login', {
				mobile: loginForm.mobile,
				code: loginForm.code
			}).then((r) => {
				const {success, message, content} = r.data;
				// 判断请求是否成功
				if(success){
					notification.success({message: '登录成功！'});
					// 登陆成功把会员信息存到store中,并且跳转控台主页
					store.commit('setMember', content);
					router.push('/welcome');
				}else{
					notification.error({message: message});
				}
			});
		};

		return {
			loginForm,
			sendCode,
			login
		};
	},
});
</script>

<style scoped>
.login-main h1 {
	font-size: 25px;
	font-weight: bold;
}

.login-main {
	margin-top: 100px;
	padding: 30px 30px 20px;
	border: 2px solid grey;
	border-radius: 10px;
	background-color: #fcfcfc;
}
</style>